<script lang="coffee">
> ./Bind.svelte
  ./BindBox.svelte
  @2-/tag0
  @~3/wait:Wait
  @3-/time/nYm.js
  @~3/drop:Drop
  @2-/ing
  @~3/box:Box
  @2-/route/goto.js
  @2-/new:New
  @2-/ing:Ing
  @5-/pay/S.js > payLi payRm paySetDefault payTopup
  ~/lib/S.js
  ./AutoTopUp.svelte
  ./DropCard.svelte
  ./HelpMail.svelte

+ card_li, stripe_li, card, rate, max, form, ed, n, STATUS

# 标题
< h = 0


conv = (x)=>
  Math.ceil((x * rate)*100)

:$
  payN = (conv(n)/100).toFixed(2)

onMount =>
  {search, pathname} = location

  [
    card_li,brand_li,stripe_li,rate
  ] = await payLi(+!search)

  rate /= 1e6
  n = 10 # 默认充值金额

  max = Math.floor 1e4/rate

  if not stripe_li[1]
    stripe_li = 0
    card = card_li[0][0]
    brand_map = new Map brand_li
    card_li.forEach (i)=>
      i[1] = brand_map.get i[1]
      if i[2]
        i[2] = nYm i[2]
      return

  if search # 这样用户请求不成功 , 还可以刷新重试
    goto pathname

  setTimeout =>
    tag0(form,'input').focus()
    return
  return

drop = [
  DropCard
  {
    setDefault: (el,id)=>
      await Ing(
        el
        paySetDefault id
      )
      for i,p in card_li
        if i[0] == id
          card_li.splice p,1
          card_li.unshift i
          card_li = card_li
      card = id
      return

    rm: (el,id)=>
      await Ing(
        el
        payRm id
      )
      for i,p in card_li
        if i[0] == id
          card_li.splice p,1
          if card_li.length
            card = (card_li[p] or card_li[p-1])[0]
          card_li = card_li
          return
      return
  }
]

add = =>
  [box] = Box BindBox
  style = New.style
  style.innerHTML = 'dialog>b>form>p{padding:16px!important;box-sizing:border-box}.__PrivateStripeElement{width:calc(100% + 4px);}dialog>b>form>b.err{margin:16px 16px 0;}'
  box.appendChild(style)
  return

submit = =>
  if ed
    if ed == 1
      ed = 0
    else
      goto 'payBill'
    return

  ed = await Ing(
    form
    payTopup conv(n), card
  )
  if ed
    if [1,6].includes ed[2]
      rate = ed[1]/1e6
    else
      ed = 1
  return

  # STATUS = [
  #   'Canceled'
  #   'Processing'
  #   'RequiresAction'
  #   'RequiresCapture'
  #   'RequiresConfirmation'
  #   'RequiresPaymentMethod
  #   '充值成功'
  # ]
</script>

<template lang="pug">
+if card_li
  +if card_li.length
    form(@submit|preventDefault=submit @&form class:d=ed)
      +if ed == 1
        p.s 扣费失败
        button 返回重试
        +else
          +if ed
            p
              i 充值
              | {(Math.floor(ed[0]/rate)/100).toFixed(2)}
              | 美元
            +else
              +if h
                h2 {h}
              b
                label(for="topUpV") 充值金额
                input(step="0.01" id="topUpV" placeholder="金额" &n type="number" min="10" max:max)
                label(for="topUpV") 美元
          p
            i  美元 → 欧元
            a(href="//www.mastercard.us/en-us/personal/get-support/convert-currency.html") 汇率 {rate.toFixed(6)}
          +if ed
            p
              i 支付
              | {(ed[0]/100).toFixed(2)}
              | 欧元
            p.s
              +if ed[2] == 6
                | 充值成功
                +else
                  b 扣费申请已提交
                  b 等待到账中
                  b 当充值到账时
                  b 将邮件通知您

            button >ok
            +else
              button 支付 {payN} 欧元
              AutoTopUp
              +each card_li as i
                i
                  input(type="radio" value:i[0] name="i" id="{'card'+i[0]}" group&card)
                  label(for="{'card'+i[0]}")
                    b {i[1]} {i[4]}
                    +if i[2]
                      i
                        i 过期时间
                        b {i[2][0]}
                        b {(i[2][1]+'').padStart(2,'0')}
                    +if i[3] != 5
                      b {i[3]}
                  Drop(A:drop)
              i
                a(@click=add) 添加新的扣费卡
      HelpMail
    +else
      Bind(A:stripe_li h:h)
      HelpMail
  +else
    b
      Wait
</template>

<style lang="stylus">
i
  font-style normal

form
  &.d
    &>p
      border-bottom 1px dashed #ccc

      &.s
        align-items center
        border-bottom 0
        flex-direction column

  &>input
    box-sizing border-box
    width 100%

  &>b, &>p
    display flex
    justify-content space-between
    width 100%

  &>p
    margin 0
    padding 16px 0

  &>b
    &>label, &>input
      border 1px solid #000
      border-width 1px 0

    &>label
      align-items center
      display flex
      padding 0 18px
      user-select none

      &:first-child
        border-left 1px solid #000

      &:last-child
        border-right 1px solid #000

    &>input
      border-right 0
      flex 1
      padding 16px 0
      text-align center
      width 64px

  &>i
    border-top 1px dashed #999
    display flex
    position relative
    width 100%

    &>label
      line-height 64px

      &>b
        margin 0 16px 0 23px
        text-transform uppercase

      &>i
        color #999
        font-size 12px
        margin-top 2px

        &>i
          margin-right 6px

        &>b:last-child
          &:before
            border-left 1px solid #999
            content ''
            display inline-block
            height 6px
            margin 0 6px
            transform rotate(20deg)
            vertical-align 1px

  &>button
    width 100%

form>i>:global(b.menu)
  margin-top -18px

form>i>:global(a)
  background-position-x 51%
  margin-left 12px
  margin-top 25px
  padding 0 0 0 2px

form>i>a
  align-self flex-end
  border-bottom 1px solid #03a
  cursor pointer
  display flex
  margin 0
  padding-bottom 6px
  padding-top 18px

  &:hover
    border-color #f40
    color #f40

b>:global(b.w)
  margin 64px auto
</style>

